<style lang="less">
    td.ivu-table-expanded-cell{
        background: #ffffff;
    }
    .tableDiv{
         .ivu-table-header{
            display: none;
        }
         .ivu-table td, .ivu-table th{
            border-bottom: none;
        }
         .ivu-table-wrapper{
            border:none;
        }
        .ivu-table:after, .ivu-table:before{
            background-color:transparent!important;
        }
    }

</style>
<template>
    <div class="tableDiv">
        <Table :columns="columns10" :data="row.children"></Table>
    </div>
</template>
<script>
import tab1 from './tab1.vue';
export default {
    components: { tab1 },
    props: {
        row: Object
    },
    data () {
        return {
            columns10: [
                {
                    type: 'expand',
                    width: 50,
                    render: (h, params) => {
                        return h(tab1, {
                            props: {
                                row: params.row
                            }
                        });
                    }
                },
                {
                    title: 'Action',
                    key: 'action',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.index);
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        let ids = [params.row.id];
                                        depot.post({
                                            url: 'data/area/deleteArea?isDel=1',
                                            data: ids,
                                            cb: (data) => {
                                                if (data.code === 0) {
                                                    this.$Message.success('删除成功');
                                                    setTimeout(() => {
                                                        location.reload();
                                                    }, 500);
                                                } else {
                                                    this.$Message.error(data.message);
                                                }
                                            }
                                        });
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                },
                {
                    title: '名称',
                    key: 'name'
                },
                {
                    title: '是否启用',
                    key: 'isActive',
                    render: (h, params) => {
                        return h('div', [
                            h('span', params.row.isActive === true ? '启用' : '禁用')
                        ]);
                    }
                }
            ]
        };
    }
};
</script>